/**
 * @description 图表组件
 * @author 大肘子
 */

import React, { FC, PureComponent } from "react";
import { QuestionCheckboxStatType } from "./tepy";
import { BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";

const StatComponent: FC<{ list: QuestionCheckboxStatType[] }> = (props) => {
  const { list } = props;
  return (
    <ResponsiveContainer width="100%" height="50%">
      <BarChart
        width={200}
        height={150}
        data={list}
        margin={{
          top: 50,
          right: 0,
          left: 0,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="count" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue" />} />
      </BarChart>
    </ResponsiveContainer>
  );
};

export default StatComponent;
